<template>

  <div id="app" style="width: 60%;margin: auto;padding-top: 50px">
    <div style="margin-bottom: 20px">
      <el-card shadow="always">
        <p style="font-size: 20px;font-weight:bold;text-align: center"><i class="el-icon-edit"/> 编辑个人履历</p>
      </el-card>

      <el-card class="box-card" style="margin-top: 20px;margin-bottom: 50px">

        <div>
          <div style="float: left">
            <span style="font-size: 20px;font-weight:bold">工作经历 </span>
          </div>
          <div style="float: right;margin-right:180px;font-size: 25px">
            <i class="el-icon-circle-plus-outline" @click="addWork()"></i>
            <i class="el-icon-remove-outline" @click="delWork()"></i>
          </div>

          <div v-for="(work,index) in workExperience" :key="index" style="clear:both;margin:20px 0  0 5%">

            <el-date-picker
                v-model="work.beginTime"
                type="date"
                placeholder="选择日期">
            </el-date-picker>

            <el-date-picker
                v-model="work.endTime"
                type="date"
                placeholder="选择日期">
            </el-date-picker>

            <el-input v-model="work.company" placeholder="请输入公司名称" style="margin-left: 2%;width: 240px">
            </el-input>

            <el-input v-model="work.position" placeholder="请输入职位" style="margin-left: 2%;width: 150px">
            </el-input>

            <el-input style="width: 80%;margin-top: 10px"
                      type="textarea"
                      placeholder="请简单说明您的工作内容，关键成绩（140字以内）"
                      v-model="work.workExperDesc"
                      maxlength="140"
                      show-word-limit>
            </el-input>

            <i class="el-icon-delete-solid" @click="delWorkExper(work.id,index)"></i>
          </div>
        </div>


        <div style="margin-top: 20px;clear: both">
          <div style="float: left">
            <span style="font-size: 20px;font-weight:bold">教育经历</span>
          </div>
          <div style="float: right;margin-right:180px;font-size: 25px">
            <i class="el-icon-circle-plus-outline" @click="addEducation()"></i>
            <i class="el-icon-remove-outline" @click="delEducation()"></i>
          </div>


          <div v-for="(work,index) in educationExperience" :key="index" style="clear: both;margin:20px 0  0 5%">

            <el-date-picker
                v-model="work.beginTime"
                type="date"
                placeholder="选择日期">
            </el-date-picker>

            <el-date-picker
                v-model="work.endTime"
                type="date"
                placeholder="选择日期">
            </el-date-picker>

            <el-input v-model="work.schoolName" placeholder="请输入学校" style="margin-left: 1%;width: 150px">
            </el-input>

            <el-input v-model="work.perfessionName" placeholder="请输入专业" style="margin-left: 1%;width: 150px">
            </el-input>

            <el-input v-model="work.category" placeholder="请输入学历" style="margin-left: 1%;width: 100px">
            </el-input>

            <el-input style="width: 80%;margin-top: 10px"
                      type="textarea"
                      placeholder="请简单说明您的学习内容，关键成绩（140字以内）"
                      v-model="work.awardsDesc"
                      maxlength="140"
                      show-word-limit>
            </el-input>

            <i class="el-icon-delete-solid" @click="delEducationExper(work.id,index)"></i>
          </div>

        </div>


        <div>
          <p style="font-size: 20px;font-weight:bold;clear: both">个人介绍</p>
          <Editor v-model="detail" :isClear="isClear" @change="change"></Editor>
        </div>
        <el-button type="primary" style="margin:10px 0 10px 0" @click="submit()">提交</el-button>
      </el-card>


    </div>
  </div>

</template>

<script>
import Editor from "@/components/wangeditor/wangeditor";

export default {
  name: "infoMine",
  data() {
    return {
      workExperience: [],
      educationExperience: [],
      isClear: false,
      detail: ''
    }
  },
  methods: {
    async addWork() {
      const {data: res} = await this.$http.post('/workExper/workExper')
      let objWork = {
        id: res.content.id,
        beginTime: '',
        company: '',
        position: '',
        workExperDesc: ''
      }
      this.workExperience.push(objWork)
    },
    delWork() {
      if (this.workExperience.length > 0) {
        this.workExperience.pop()
      }
    },
    async addEducation() {
      const {data: res} = await this.$http.post('/eduExper/eduExper')
      let objEducation = {
        id: res.content.id,
        beginTime: '',
        schoolName: '',
        perfessionName: '',
        category: '',
        awardsDesc: ''
      }
      this.educationExperience.push(objEducation)
    },
    delEducation() {
      if (this.educationExperience.length > 0) {
        this.educationExperience.pop()
      }
    },

    change(val) {
      console.log(val)
    },

    async initWorkExper() {
      const {data: res} = await this.$http.get('/workExper/workExperList/' + this.$store.state.userId)
      this.workExperience = res.content
    },
    async initEduExper() {
      const {data: res} = await this.$http.get('/eduExper/eduExperList/' + this.$store.state.userId)
      this.educationExperience = res.content
    },

    async initDetail() {
      const {data: res} = await this.$http.get('/programmer/programmerInfo/' + this.$store.state.userId)
      this.detail = res.content.programmerIntroduction
    },

    async submit() {
      const {data: resWork} = await this.$http.put('/workExper/workExperList', this.workExperience)
      console.log(resWork)

      const {data: resEdu} = await this.$http.put('/eduExper/eduExperList', this.educationExperience)
      console.log(resEdu)

      const {data: resDetail} = await this.$http.put('/programmer/perIntroduce', {programmerIntroduction: this.detail})
      console.log(resDetail)

      await this.$router.push('/userLoginMain/infoMain')
    },

    async delWorkExper(Id, index) {
      this.workExperience.splice(index, 1)
      await this.$http.delete('/workExper/workExper/' + Id)
    },
    async delEducationExper(Id, index) {
      this.educationExperience.splice(index, 1)
      await this.$http.delete('/eduExper/eduExper/' + Id)
    }

  },
  mounted() {
    this.initWorkExper()
    this.initEduExper()
    this.initDetail()
  },
  components: {
    Editor
  }

}

</script>

<style scoped>

</style>